<template>
  <div class="service-wrap">
    <div class="search-bar">
      <el-input size="mini" placeholder="请输入" prefix-icon="el-icon-search" v-model="searchValue"></el-input>
    </div>
    <div class="type">
      <div class="type-item" :class="{active : item.active}" v-for="item in serverType" @click="tabType(item)">{{item.name}}</div>
    </div>
    <div class="service-list" v-loading="loading">
      <el-collapse accordion v-model="serverActive">
        <el-collapse-item v-for="(item,index) in serverTreeData"  :key="index" :name="index">
          <template slot="title">
            <div class="title-item" :class="{active : serverActive === index}">
              <div class="server-name">{{item.sName}}</div>
              <div class="server-state">{{item.sStatus}}</div>
            </div>
          </template>
          <div class="data-item" v-for="child in item.list" :class="{active : child.active}" @click="onclickInstance(child)">
            <span>{{child.siName}}</span>
          </div>
          <div class="not-data" v-if="item.list.length === 0">暂无数据</div>
        </el-collapse-item>
      </el-collapse>

      <div class="pager">
        <el-pagination
          @current-change="currentChange"
          :current-page="serverPage.pageNum"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="serverPage.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "serviceList",
    data () {
      return {
        serverActive: 0,  //默认显示服务列表第一个元素
        serverTreeData: [],
        loading: true,
        serverPage: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        serverType: [
          {id: 1, name: "REST功能服务", active: true},
          {id: 2, name: "RPC功能服务", active: false},
          {id: 3, name: "主题服务", active: false},
          {id: 4, name: "信息服务", active: false},
        ],
        searchValue: ""
      }
    },
    created () {
      this.onLoadServerCaseInterfaceData();
    },
    methods: {
      /**初始化加载服务数据**/
      onLoadServerCaseInterfaceData() {
        this.serverTreeData = []
        this.axios.get('api/center/servers', {
          params: {
            pageNum: this.serverPage.pageNum,
            pageSize: this.serverPage.pageSize
          }
        })
          .then((res) => {
            let resData = res.data.list;
            this.serverPage.total = res.data.total;
            resData.forEach((item,index) => {
              item.list = [];
              this.axios.get('api/center/instances?sId=' + item.sid)
                .then((rsp) => {
                  rsp.data.forEach(i => i.active = false);
                  item.list = rsp.data;
                  //请求完了关闭loading
                  if (index === resData.length - 1) {
                    //默认展开第一个
                    this.serverTreeData = resData;
                    setTimeout(() => {
                      this.loading = false;
                      this.onclickInstance(this.serverTreeData[0].list[0]);
                    }, 500)
                  }
                })
            });
          }).catch(() => {
          this.loading = false
        })
      },
      /**服务列表分页**/
      currentChange(val) {
        this.serverPage.pageNum = val
      },
      /**点击实例**/
      onclickInstance(row) {
        this.serverTreeData.forEach(item => {
          item.list.forEach(i => i.active = false);
          for (let i = 0; i < item.list.length; i++) {
            if (item.list[i].siId === row.siId) {
              item.list[i].active = true;
              break;
            }
          }
        });
        this.$emit("serviceCall", row.sid);
      },
      /**选择服务分来**/
      tabType(data) {
        this.loading = true;
        this.serverType.forEach(item => item.active = false);
        this.serverType.forEach(item => {
          if (data.id === item.id) {
            item.active = true;
          }
        })
        this.onLoadServerCaseInterfaceData();
      }
    }

  }
</script>

<style>
  .service-list .el-table td ,.service-layout .inter-list .el-table td{border-bottom: 1px dashed #ebeef5!important}
  .service-list .el-table tr:last-child td,.service-layout .inter-list .el-table tr:last-child td{border-bottom: none!important;}
  .service-list .el-collapse-item__header{padding-left: 15px;box-sizing: border-box}
  .service-list .el-collapse-item__content{padding-bottom: 0;}
  .el-collapse-item__header.is-active{
    background: #18bdf4;
    color: #fff;
  }
  .el-collapse-item__header.is-active .server-state{
    color: #fff !important;
  }
  .pager .el-pager li{
    background: rgba(0, 0, 0, 0);
  }
  .pager .el-pagination button{
    background: rgba(0, 0, 0, 0);
  }
</style>
<style scoped lang="less">
  .service-wrap{
    padding: 15px;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    .type{
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      &-item{
        width: 25%;
        height: 100%;
        line-height: 44px;
        font-size: 14px;
        color: #333;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        border-bottom: 2px solid #ebeef5;
        transition: all 0.5s;
        &.active{
          border-color: #0aa8e9;
        }
      }
    }
    .service-list {
      height: calc(100% - 115px);
      overflow-y: auto;
      overflow-x: hidden;
      .title-item{
        display: flex;
        .server-name{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          width: calc(100% - 100px);
        }
        .server-state{
          width: 100px;
          text-align: right;
          padding-right: 5px;
          box-sizing: border-box;
          color: #67c23a;
        }
      }
      .data-item{
        padding: 10px 30px;
        border-bottom: 1px solid #ebeef5;
        cursor: pointer;
        transition: all 0.3s;
        &:hover{
          background: #d5f3fe;
        }
        &:first-child{
          border-top: 1px solid #ebeef5;
        }
        &:last-child{
          border-bottom: none;
        }
        i{
          float: right;
          font-size: 20px;
          font-weight: 600;
          transition: all 0.2s;
          opacity: 0;
          color: #0aa8e9;
        }
        &.active{
          background: #ffce29;
          i{
            opacity: 1;
            color: #fff;
          }
        }
      }
      .pager {
        position: absolute;
        width: 100%;
        padding: 15px;
        left: 0;
        bottom: 0;
      }
    }
  }
</style>
